<script setup>
import { ref } from 'vue'
import { login } from '../api/auth.js'
import { getToken, hasToken } from '../utils/auth.js'

const testResult = ref('')
const loading = ref(false)

// 测试登录API
const testLogin = async () => {
  loading.value = true
  testResult.value = '正在测试登录API...'
  
  try {
    const result = await login('test', 'test')
    testResult.value = `测试结果: ${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResult.value = `测试失败: ${error.message}`
  } finally {
    loading.value = false
  }
}

// 检查token状态
const checkToken = () => {
  const token = getToken()
  const isLoggedIn = hasToken()
  testResult.value = `Token状态: ${isLoggedIn ? '已登录' : '未登录'}\nToken值: ${token || '无'}`
}
</script>

<template>
  <div class="test-container">
    <h2>API测试页面</h2>
    
    <div class="test-buttons">
      <button @click="testLogin" :disabled="loading" class="test-btn">
        {{ loading ? '测试中...' : '测试登录API' }}
      </button>
      
      <button @click="checkToken" class="test-btn">
        检查Token状态
      </button>
    </div>
    
    <div class="test-result">
      <pre>{{ testResult }}</pre>
    </div>
  </div>
</template>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.test-btn {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn:hover:not(:disabled) {
  background: #5a67d8;
}

.test-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.test-result {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.test-result pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
}
</style> 